<template>
    <div class="email-container">
        <section class="login_message">
            <input type="text" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
        </section>

        <section class="login_vertification">
            <input type="password" maxlength="6" placeholder="验证码" v-if="Toright" v-model="pwd">
            <input type="text" maxlength="6" placeholder="验证码1" v-else v-model="pwd">
        </section>

        <div class="switch_button">
            <div class="switch_circle" :class="{right:Toright}" @click="Toright=!Toright"></div>
            <span class="txt"></span>
        </div>

        <section class="login_message">
            <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
            <img  class="get_vertification" src="../../images/1.jpg" alt="captcha">
        </section>
    </div>
</template>

<script>
    export default {
        name: "email",
        data(){
            return{
                showPswd:false,
                pwd:'',
                Toright:false,
                name:'',
                captcha:'',
            }
        }
    }
</script>

<style scoped lang="scss">
    .email-container {
        .get_vertification {
            width: 30px;
            height: auto;
            .right_phone {
                color: black
            }
        }

        .switch_button {
            position: relative;
            right: -85%;
            top: -50px;
            width: 60px;
            height: 30px;
            border: 1px solid #6d6d72;
            border-radius: 5%;

            .switch_circle {
                position: absolute;
                z-index: 99;
                background: red;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                left: 0px;
                margin-top: 4px;
                transition: 0.5s;
                transform: translateX(0)
            }

            .txt {
                position: absolute
            }

            .right {
                position: absolute;
                background: red;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                left: 40px;
                margin-top: 4px;
                transition: 0.5s;
                transform: translateX(45)
            }

            .txt {
                display: none
            }

        }
    }
</style>